<style>

</style>
<template>
    <div>
        <h2 v-if="showTitle" v-show="chartConfig" style="text-align: center;">漏斗总转化率<span> {{absolute}}%</span></h2>
        <div style="display: flex">
            <e-chart style="flex: 2"
                     v-if="type=='all'||type=='bar'"
                     v-loading="loading"
                     :options="barConfig"
                     :auto-resize="true"
                     :style="{'width': '100%','height':height+'px'}"
            ></e-chart>
            <e-chart
                     v-if="type=='all'||type=='funnel'"
                     style="flex: 1"
                     v-loading="loading"
                     :options="chartConfig"
                     :auto-resize="true"
                     :style="{'width': '100%','height':height+'px'}"
            ></e-chart>
        </div>
    </div>

</template>
<script>

    //这里定义组件
    Rap.define([], function () {
        return {
            name: 'ly-chart-funnel',
            props:
                {
                    noGlobal: Boolean,
                    showTitle: {
                        'default': function () {
                            return false
                        }
                    },
                    type: {
                        'default': function () {
                            return "funnel"
                        }
                    },
                    params: {
                        'default': function () {
                            return {}
                        }
                    },
                    date: {
                        'default': function () {
                            return {}
                        }
                    },
                    //高度
                    height: {
                        'default': 600
                    },
                    //数据链接
                    link: {
                        'default': '/io/statistics/event/funnel',
                    },
                    //x 取值
                    key_name: {
                        'default': 'levels'
                    },
                    //y 取值
                    key_value: {
                        'default': 'transform_absolute'
                    },
                    key_total: {
                        'default': 'total'
                    },
                    //y 取值
                    key_relative: {
                        'default': 'transform_relative'
                    },
                    //line 类型时背景色
                    color: {
                        default: function () {
                            if (Ly.chart && Ly.chart.color) {
                                return Ly.chart.color;
                            }
                            return ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
                        }
                    },
                    map: {
                        'default': function () {
                            return []
                        }
                    },
                },
            data: function () {

                return {
                    absolute: 100,
                    loading: false,
                    chartConfig: null,
                    barConfig: null,
                    global_params: Ly.chart.global_params
                }
            },
            created: function () {
                var loadDebounce = _.debounce(this.load, 100);
                this.loadDebounce = loadDebounce;
                loadDebounce();
            },
            watch: {
                params: {
                    deep: true,
                    handler: function () {
                        this.loadDebounce();
                    }
                },
                date: {
                    deep: true,
                    handler: function () {
                        this.loadDebounce();
                    }
                },
                global_params: {
                    deep: true,
                    handler: function () {
                        if (!this.noGlobal) {
                            this.loadDebounce();
                        }

                    }
                }
            },
            methods: {
                download: function () {

                },
                load: function () {
                    var _data = [];
                    var dataCount = 7;
                    for (let i = 0; i < dataCount; i++) {
                        _data.push([
                            echarts.number.round(Math.random() * 100),
                            echarts.number.round(Math.random() * 400)
                        ]);
                    }
                    var bar_map = [];
                    for (var i = 0; i < this.map.length; i++) {
                        bar_map.push('第' + (i + 1) + "步 :" + this.map[i]);
                    }
                    var barConfig = {
                        xAxis: {
                            type: 'category',
                            data: []
                        },
                        yAxis: {
                            type: 'value'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            },
                            formatter: function (params) {
                                var tar = params[0];
                                return tar.name + '<br/> 转化用户 : ' + tar.value;
                            }
                        },
                        barMaxWidth: 50,
                        barMinWidth: 50,
                        series: [
                            {
                                data: [{value: 100, itemStyle: {color: "#000"}}, 200, 150, 80, 70, 110, 130],
                                type: 'bar'
                            }
                        ]
                    };
                    var config = {
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c}%'
                        },
                        legend: {
                            data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
                        },
                        color:this.color,
                        series: [
                            {
                                name: 'Funnel',
                                type: 'funnel',
                                left: '10%',
                                top: 60,
                                bottom: 60,
                                width: '80%',
                                min: 0,
                                max: 100,
                                minSize: '0%',
                                maxSize: '100%',
                                sort: 'descending',
                                gap: 2,
                                label: {
                                    show: true,
                                    position: 'inside'
                                },
                                labelLine: {
                                    length: 10,
                                    lineStyle: {
                                        width: 1,
                                        type: 'solid'
                                    }
                                },
                                itemStyle: {
                                    borderColor: '#fff',
                                    borderWidth: 1
                                },
                                emphasis: {
                                    label: {
                                        fontSize: 20
                                    }
                                },
                                data: []
                            }
                        ]
                    };
                    var me = this;
                    var link = me.link;
                    if (link.indexOf('?') === -1) {
                        link += '?';
                    } else {
                        var end = link.substring(link.length - 1, link.length);
                        if (end !== '?' && end !== '&') {
                            link += "&";
                        }
                    }
                    for (var key in me.date) {
                        link += (key + "=" + me.date[key] + "&");
                    }
                    var params = me.params;
                    if (!this.noGlobal) {
                        params = _.extend({}, Ly.chart.global_params, me.params);
                    }
                    me.loading = true;
                    var names=[];
                    axios.post(link, params).then(function (rs) {
                        config.series[0].data = [];
                        barConfig.series[0].data = [];
                        var ii=0;
                        _.each(rs.data.data, function (item) {
                            var index = Number.parseInt(item[me.key_name]);
                            if(index===0){
                                return;
                            }
                            var name = me.map[index-1] ? me.map[index-1] : item[me.key_name];
                            item[me.key_relative]=Number.parseInt(item[me.key_relative]*100)/100;
                            item[me.key_value]=Number.parseInt(item[me.key_value]*100)/100;
                            me.absolute = item[me.key_value];
                            var it = {
                                name: name + ": " + item[me.key_value] + "%",
                                value: item[me.key_value],
                                tooltip: {
                                    show: true,
                                    formatter: name + "<br/> 转化用户:" + item[me.key_total] + "</br> 相对转化 :" + item[me.key_relative] + "% <br/> 绝对转化 :" + item[me.key_value] + "%",
                                }
                            };
                            config.series[0].data.push(it);
                            var it1 = {
                                name: bar_map[index-1],
                                value: item[me.key_total],
                                itemStyle: {color: me.color[ii]}
                            };
                            ii++;
                            barConfig.series[0].data.push(it1);
                            barConfig.xAxis.data.push(it1.name);
                        });
                        for(var i=0;i<barConfig.series[0].data.length-1;i++){
                            var s= me.midArea(barConfig.series[0].data[i],barConfig.series[0].data[i+1]);
                            barConfig.series.push(s);
                        }
                        me.chartConfig = config;
                        me.barConfig = barConfig;
                        me.loading = false;
                    });

                },
                midArea: function (from,to) {
                    var data = [[from.name, from.value], [to.name, to.value], [to.name,0], [from.name, 0]];
                   return  {
                        type: 'custom',
                        renderItem: function (params, api) {
                            params.context.rendered = true;
                            let points = [];

                            for (let i = 0; i < data.length; i++) {
                                points.push(api.coord(data[i]));
                            }
                            points[0][0]=points[0][0]+25;
                            points[1][0]=points[1][0]-25;
                            points[2][0]=points[2][0]-25;
                            points[3][0]=points[3][0]+25;
                            let color = '#eff5ff';
                            return {
                                type: 'polygon',
                                shape: {
                                    points: points
                                },

                                style: api.style({
                                    fill: color,
                                    stroke: echarts.color.lift(color, 0.1)
                                })
                            };
                        },
                       emphasis:{},
                       clip: true,
                       data: data,
                       label: {
                           show: true,
                           color:'#000',
                           position: 'insideBottom',
                           formatter: function (params) {
                               var p = Number.parseInt(to.value*100/from.value*100)/100;
                               return p+"%";
                           },
                       },
                    }
                }
            }
        }
    })
</script>
